<template>
  <div id="app">
    <el-container class="container">
      <el-header
        height="88px"
        class="header"
      >
        <div class="h-title">
          <span class="time">{{ currentTime }}</span>
          智慧诚信社区平台
        </div>
      </el-header>
      <div style="display:flex;padding:0 15px 0 15px">
        <!-- 左侧 -->
        <el-row class="left-container ">
          <el-col :span="8">
            <img class="warningBg" :src="warning" alt="">
            <div class="firstBox">
              <KeyEarlywarning></KeyEarlywarning>
              <IntelligenceGroup></IntelligenceGroup>
              <BlockchainCertificate></BlockchainCertificate>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="secondBox">
              <CommunityManagement></CommunityManagement>
              <DistributionStation></DistributionStation>
            </div>
          </el-col>
        </el-row>

        <!-- 右侧 -->
        <div class="right-container">
          <p class="title">
            精细化展示
          </p>
          <div class="content">
            <el-row :gutter="15">
              <el-col :span="10" style="height: calc(100vh - 168px);">
                <MaintenanceFund></MaintenanceFund>
                <CommunityInfo></CommunityInfo>
              </el-col>
              <el-col :span="14" style="height: calc(100vh - 168px);">
                <IntelligentHardware></IntelligentHardware>
                <FirefightingEquipment></FirefightingEquipment>
                <RepairData></RepairData>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
import moment from 'moment'
// 组件
import BlockchainCertificate from '@/components/blockchainCertificate'
import IntelligentHardware from '@/components/intelligentHardware'
import KeyEarlywarning from '@/components/KeyEarlywarning'
import CommunityManagement from '@/components/CommunityManagement'
import MaintenanceFund from '@/components/maintenanceFund'
import RepairData from '@/components/repairData'
import IntelligenceGroup from '@/components/IntelligenceGroup'
import FirefightingEquipment from '@/components/firefightingEquipment'
import CommunityInfo from '@/components/communityInfo'
import DistributionStation from '@/components/distributionStation'

export default {
  name: 'app',
  components: {
    BlockchainCertificate,
    IntelligentHardware,
    IntelligenceGroup,
    KeyEarlywarning,
    CommunityManagement,
    MaintenanceFund,
    RepairData,
    FirefightingEquipment,
    CommunityInfo,
    DistributionStation
  },
  data() {
    return { 
      warning:require('assets/warningBg.png'),
      currentTime: '' }
  },
  mounted() {
    setInterval(() => {
      this.currentTime = this.dataFormat(new Date())
    }, 1000)
  },
  methods: {
    dataFormat(date) {
      let dateStr = moment(date).format('YYYY-MM-DD')
      let weekStr = moment(date).format('dddd')
      let timeStr = moment(date).format('HH:mm:ss')
      return dateStr + ' ' + weekStr + ' ' + timeStr
    }
  }
}
</script>

<style>
#app {
  height: 100vh;
  width: 100%;
  font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
<style lang="less" scoped>
.container {
  height: 100%;
  background: url('./assets/bg.png') no-repeat;
  background-size: cover;
  background-attachment: scroll;
}
.header {
  position: absolute;
  width: 100%;
  z-index: 10;
  background: url('./assets/header_bg.png') no-repeat;
  background-size: 100% 100%;
}
.header .h-title {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  word-spacing: 5px;
  .time {
    position: absolute;
    font-size: 14px;
    font-weight: normal;
    left: 0;
    top: 12px;
  }
}
.warningBg{
  position: absolute;
  top: -1rem;
    left: 70px;
    width: 6rem;
    height: 6rem;
}
.left-container {
  margin-top: 88px;
  flex: 4;
  .firstBox {
    height: calc(100vh - 128px);
  }
  .secondBox {
    height: calc(100vh - 128px);
  }
}
.right-container {
  position: relative;
  height: 100%;
  flex: 3;
  margin-top: 68px;
  height: calc(100vh - 108px);
  background: url('./assets/rightbg.png') no-repeat;
  background-size: cover;
  .title {
    position: absolute;
    top: 1em;
    width: 100%;
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
  }
  .content {
    padding:60px 0.5rem 0.5rem;
  }
}
</style>
